<template>
  <div>
    <el-row :gutter="20" class="gl_searchBox gl_mb_15" style="margin-left: 0;margin-right: 0;">
      <el-col :span="4" :lg="4">
        <p>模板名称</p>
        <el-input v-model="qo.Filter" placeholder="请输入模板名称" size="mini" clearable @change="queryList()" />
      </el-col>
      <el-col :span="4" :lg="4">
        <p>模板类型</p>
        <el-select v-model="qo.MessageTemplateTypeCode" size="mini" placeholder="模板类型" clearable filterable @change="queryList()">
          <el-option v-for="item in dict.messageTemplateType" :key="item.code" :value="item.code" :label="item.value" />
        </el-select>
      </el-col>
      <el-col :span="6" :lg="4">
        <p>{{ type === 'temp' ? '创建时间' : '发送时间' }}</p>
        <el-date-picker
          v-model="time"
          size="mini"
          style="width:100%"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timeChange"
        />
      </el-col>
      <el-col v-if="type === 'temp'" :span="4" :lg="4">
        <p>状态</p>
        <el-select v-model="qo.IsEnabled" size="mini" placeholder="请选择状态" filterable clearable @change="queryList()">
          <el-option v-for="item in statusList" :key="item.code" :value="item.code" :label="item.name" />
        </el-select>
      </el-col>
      <el-col :span="4" :lg="4" class="search_btn">
        <!-- 查询按钮 -->
        <el-button type="primary" size="mini" @click="queryList()">筛选</el-button>
        <!-- 重置按钮 -->
        <el-button type="warning" size="mini" @click="clearData()">重置</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { FormatDate } from '@/lib/index.js';
export default {
  props: {
    qo: {
      type: Object,
      default() {
        return {};
      }
    },
    type: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data () {
    return {
      time: [],
      statusList: [
        {
          code: true,
          name: '启用'
        },
        {
          code: false,
          name: '禁用'
        }
      ]
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
    console.log('dict', this.dict);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    queryList() {
      this.$emit('queryList', this.qo);
    },
    // 时间选择器
    timeChange(val) {
      if (val instanceof Array) {
        this.qo.StartDateTime = FormatDate(this.time[0], 'yyyy-MM-dd');
        this.qo.EndDateTime = FormatDate(this.time[1], 'yyyy-MM-dd');
      } else {
        this.qo.StartDateTime = '';
        this.qo.EndDateTime = '';
      }
      this.queryList();
    },
    clearData() {
      this.time = [];
      this.qo.StartDateTime = '';
      this.qo.EndDateTime = '';
      this.qo.Filter = '';
      this.qo.MessageTemplateTypeCode = '';
      this.qo.IsEnabled = null;
      this.queryList();
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
